<template>
  <a-modal title="选择开具证明" v-model:visible="visible">
    <a-form-item
      required
      :label="
        '您选择了' + formData.userIds.length + '名员工，请选择需要开具证明类型'
      "
      show-colon
    />
    <div class="box">
      <div
        v-for="(title, index) in ['实习', '离职', '工作', '收入']"
        :class="formData.type === index + 1 ? 'choice' : 'base'"
        :key="index"
        @click="formData.type = index + 1"
      >
        {{ title }}证明
      </div>
    </div>
    <template #footer>
      <a-button @click="visible = false">取消</a-button>
      <a-button @click="handleOk" type="primary">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { Message } from '@arco-design/web-vue';
import { watch, ref, reactive } from 'vue';
const router = useRouter();

let formData = reactive<{ userIds: number[]; type?: number }>({
  userIds: []
});

let handleOk = () => {
  if (!formData.type) return Message.error('请选择证明类型');
  router.push({
    name: 'IssuingCertificate',
    query: {
      jsonStr: JSON.stringify(formData)
    }
  });
};

defineExpose({
  openModal(list: any[]) {
    if (!list.length) return Message.error('请选择人员');
    formData.userIds = list;
    visible.value = true;
  }
});

let visible = ref(false);
watch(visible, (val) => {
  if (val) return;
  formData.userIds = [];
  formData.type = undefined;
  //
});
</script>

<style scoped>
.box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.choice {
  border: 1px solid rgb(var(--arcoblue-6));
  color: rgb(var(--arcoblue-6));
  min-width: 200px;
  text-align: center;
  cursor: pointer;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
}
.base {
  border: 1px solid var(--color-neutral-8);
  color: var(--color-neutral-8);
  min-width: 200px;
  text-align: center;
  cursor: pointer;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
}
</style>
